<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			.box {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="div2">
			<input class="active" type="button" value="一">
			<input type="button" value="二">
			<input type="button" value="三">
		</div>
		<div class="box" style="display:block;">11</div>
		<div class="box">22</div>
		<div class="box">33</div>
	</body>

</html>
<script type="text/javascript">
	window.onload = function() {
		var oTab = new TabSwitch("div2");
	}
	var oBtn = null;
	var oDiv = null;

	function TabSwitch(id) {
		var div2 = document.getElementById(id);
		//全局变量 转变成属性
		this.oBtn = div2.getElementsByTagName('input');
		this.oDiv = document.getElementsByClassName('box');
		//将这里的对象this存入_this中，方便在按钮点击里面用
		var _this = this;
		for(i = 0; i < this.oBtn.length; i++) {
			this.oBtn[i].index = i;
			this.oBtn[i].onclick = function() {
				//这里的this指的是按钮，把它作为参数传到函数中；
				_this.tab(this);
			}
		}
	}
	//函数转变成对象的方法
	TabSwitch.prototype.tab = function(oBtn) {
		for(i = 0; i < this.oBtn.length; i++) {
			this.oBtn[i].className = '';
			this.oDiv[i].style.display = 'none';
		}
		oBtn.className = 'active';
		this.oDiv[oBtn.index].style.display = 'block';
	}
</script>